<template>
  <div>
    <div class="app-container">
      <p class="title">感谢您的付出！</p>
      <div class="bgf">
        <el-row type="flex" justify="space-between" class="tongji">
          <el-col :span="4" class="item">
            <img src="@/assets/image/money.png" alt="" width="80">
            <ul>
              <li>
                <span>{{integralList.cashMoney}}</span>元
              </li>
              <li>现金收入</li>
            </ul>
          </el-col>
          <el-col :span="4" class="item">
            <img src="@/assets/image/saoma.png" alt="" width="80">
            <ul>
              <li>
                <span>{{integralList.scanMoney}}</span>元
              </li>
              <li>扫码金额</li>
            </ul>
          </el-col>
          <el-col :span="4" class="item">
            <img src="@/assets/image/yue.png" alt="" width="80">
            <ul>
              <li>
                <span>{{integralList.initMoney}}</span>元
              </li>
              <li>初始金额</li>
            </ul>
          </el-col>
          <el-col :span="4" class="item">
            <img src="@/assets/image/zhichu.png" alt="">
            <ul>
              <li>
                <span>{{integralList.outMoney}}</span>元
              </li>
              <li>支出金额</li>
            </ul>
          </el-col>
          <el-col :span="4" class="item">
            <img src="@/assets/image/zhichu.png" alt="">
            <ul>
              <li>
                <span>{{integralList.otherMoney}}</span>元
              </li>
              <li>其他收入</li>
            </ul>
          </el-col>
          <el-col :span="4" class="item">
            <img src="@/assets/image/zhichu.png" alt="">
            <ul>
              <li>
                <span>{{integralList.refendMoney}}</span>元
              </li>
              <li>退款收入</li>
            </ul>
          </el-col>
<!--          <el-col :span="4" class="item">-->
<!--            <img src="@/assets/image/totalmoney.png" alt="">-->
<!--            <ul>-->
<!--              <li>-->
<!--                <span>{{integralList.sendMoney}}</span>元-->
<!--              </li>-->
<!--              <li>取款金额</li>-->
<!--            </ul>-->
<!--          </el-col>-->

          <el-col :span="4" class="item">
            <img src="@/assets/image/totalmoney.png" alt="">
            <ul>
              <li>
                <span>{{integralList.allMoney}}</span>元
              </li>
              <li>总金额</li>
            </ul>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between" class="time">
          <el-col :span="13">
            本班收银：<span class="mar50">{{integralList.userName}}</span>
          </el-col>

          <el-col :span="6" class="txtright">
            <el-button type="primary" @click="goWorkTanKuang = true">我要上班</el-button>
          </el-col>
          <el-col :span="6" class="txtright">
            <el-button type="primary" @click="goXiaBanTanKuang = true">我要下班</el-button>
          </el-col>
<!--          <el-col :span="6" class="txtright">-->
<!--            <el-button type="danger" @click="savePassWord = true">我要取款</el-button>-->
<!--          </el-col>-->
        </el-row>
      </div>

    </div>
    <el-dialog title="出库明细" :visible.sync="visible" width="580px">
      <p class="date">2099-09-09 09:00:14 至 2099-09-09 09:00:14</p>
      <el-table :data="tableData1" class="tables">
        <el-table-column label="商品名称" prop="name">
        </el-table-column>
        <el-table-column label="点单数量" prop="num">
        </el-table-column>
        <el-table-column label="金额">
          <template slot-scope="scope">
            <span class="money">{{ scope.row.money }}</span>元
          </template>
        </el-table-column>

      </el-table>
      <p class="txtright">
        <el-button type="primary" @click="visible = false">关闭</el-button>
      </p>
    </el-dialog>
    <el-dialog title="收支明细" :visible.sync="incomeVisible" width="370px">
      <p class="txtcenter">2099-09-09 09:00:14 至 2099-09-09 09:00:14</p>
      <el-row class="list">
        <el-col :span="12" class="colory">销售分类</el-col>
        <el-col :span="12" class="colory">金额</el-col>
        <el-col :span="12">包房收入</el-col>
        <el-col :span="12"><span class="money">999</span>元</el-col>
        <el-col :span="12">商品收入</el-col>
        <el-col :span="12"><span class="money">999</span>元</el-col>
        <el-col :span="12">总金额</el-col>
        <el-col :span="12"><span class="money">999</span>元</el-col>
      </el-row>
      <p class="txtright">
        <el-button type="primary" @click="incomeVisible = false">关闭</el-button>
      </p>
    </el-dialog>
    <el-dialog title="确认交班" :visible.sync="handoverVisible" width="400px">

      <el-row class="jine">
        <el-col :span="8">
          <span>999 </span>元<p>上交金额</p>
        </el-col>
        <el-col :span="8">
          <span>999</span> 元<p>结算金额</p>
        </el-col>
        <el-col :span="8">
          <span>999</span> 元<p>初始金额</p>
        </el-col>

      </el-row>
      <p class="txtright btn">
        <el-button type="primary" @click="confirm">确定</el-button>
      </p>
    </el-dialog>


    <el-dialog
      title="我要上班"
      :visible.sync="goWorkTanKuang"
      width="30%"
      :before-close="goWorkTanKuang">
      <el-form ref="form" :model="form" label-width="110px">
        <el-form-item label="请输入初始金额">
          <el-input v-model="initMoney"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="goWorkTanKuang = false">取 消</el-button>
    <el-button type="primary" @click="MyGoWork(initMoney)">确 定</el-button>
  </span>

    </el-dialog>
    <el-dialog
      title="我要下班"
      :visible.sync="goXiaBanTanKuang"
      width="30%"
      :before-close="goXiaBanTanKuang">
      <el-form ref="form" :model="form" label-width="110px">
       <!-- <el-form-item label="请输入上交金额">
          <el-input v-model="deliverMoney"></el-input>
        </el-form-item>-->
        <el-form-item label="请输入交班金额">
          <el-input v-model="remainingMoney"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="goXiaBanTanKuang = false">取 消</el-button>
    <el-button type="primary" @click="MyXiaBanWork(deliverMoney,remainingMoney)">确 定</el-button>
  </span>
    </el-dialog>
    <!--我要取款-->
    <el-dialog
      title="我要取款"
      :visible.sync="saveMoney"
      width="30%"
      :before-close="saveMoney">
      <el-form ref="form" :model="form" label-width="110px">
        <el-form-item label="请输入取款金额">
          <el-input v-model="saveBankMoney"  type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="saveMoney = false">取 消</el-button>
    <el-button type="primary" @click="gosaveMoney(saveBankMoney)">确 定</el-button>
  </span>
</el-dialog>
    <!--取款密码-->
    <el-dialog
      title="输入取款"
      :visible.sync="savePassWord"
      width="30%">
      <el-form ref="form" :model="form" label-width="110px">
        <el-form-item label="请输入取款密码">
          <el-input   type="password"  v-model="password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="savePassWord = false">取 消</el-button>
    <el-button type="primary" @click="checkPassword(password)">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
  import {Integral} from "@/api/mahjong/integral";
  import {getMoneyInfo, setInitMOney, goXiaBan, getWorkRecord, getDetailInfo} from "@/api/mahjong/record";
  import {savemoney} from "@/api/mahjong/sendMoney";
  import {checkAmountpassword} from "@/api/system/dept";
  export default {
    name: "Druid",
    data() {
      return {
        tab: ['员工交班', '交班查询'],
        idx: 0,
        form: {
          date: ''
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        visible: false,
        incomeVisible: false,
        handoverVisible: false,
        goWorkTanKuang: false,
        goXiaBanTanKuang: false,
        saveBankMoney:'',
        saveMoney:false,
        savePassWord:false,
        password:'',
        integralList: [],
        getWorkRecordData: [],
        initMoney: 0,
        deliverMoney: 0,
        remainingMoney: 0,
        tableData: [{
          date: '2099-09-09  09:00:14',
          money: '966',
          yuangong: 'user123456'
        }, {
          date: '2099-09-09  09:00:14',
          money: '966',
          yuangong: 'user123456'
        }, {
          date: '2099-09-09  09:00:14',
          money: '966',
          yuangong: 'user123456'
        }, {
          date: '2099-09-09  09:00:14',
          money: '966',
          yuangong: 'user123456'
        }],
        tableData1: [{
          name: '香烟',
          num: '5',
          money: '966'

        }, {
          name: '香烟',
          num: '5',
          money: '966'
        }, {
          name: '香烟',
          num: '5',
          money: '966'
        }, {
          name: '香烟',
          num: '5',
          money: '966'
        }]
      };
    },
    created() {
      this.initGetMoney();
      this.initWorkRecord();
    },
    mounted: function () {

    },
    methods: {
      checkPassword(e){
        console.log(e);
        checkAmountpassword(e).then(response => {
          if(response.code==200){
            this.saveMoney=true;
            this.savePassWord=false;
          }

        });

      },
      gosaveMoney(e){
        console.log(e);
        console.log(this.integralList.allMoney);
        console.log(e>parseFloat(this.integralList.allMoney));
        if(e>parseFloat(this.integralList.allMoney)){
          this.msgError("取款不允许超过总金额");
          return
        }
        savemoney(e).then(response => {
          if(response.code==200){

            this.saveMoney=false;
          }

        });
      },
      /** 收支明细按钮 */

      /** 上班按钮操作 */
      MyGoWork(initMoney) {
        setInitMOney(initMoney).then(response => {
          //关闭弹框
          this.goWorkTanKuang = false;
          this.setInitMOney = response.data;
        }).then(() => {
          // this.msgSuccess(this.setInitMOney);
          this.msgSuccess("上班成功");
        }).catch(function () {
        });
      },
      /** 下班按钮操作 */
      MyXiaBanWork(deliverMoney, remainingMoney) {
        goXiaBan(deliverMoney, remainingMoney).then(response => {
          //关闭弹框
          this.goXiaBanTanKuang = false;
          this.xiabanInfo = response.data;
        }).then(() => {
          this.msgSuccess("下班成功");
        }).catch(function () {
        });
      },
      /** 查询金额 */
      initGetMoney() {
        getMoneyInfo().then(response => {
          this.integralList = response.data;
          // this.total = response.total;
          // this.loading = false;
        })
      },
      /** 查询交班记录 */
      initWorkRecord() {
        getWorkRecord(this.queryParams).then(response => {
          this.getWorkRecordData = response.rows;
          this.total = response.total;
          this.loading = false;
        })
      },
      change(index) {

        if (this.idx === index || index === undefined) {
          return false;
        } else {
          this.idx = index;
        }
      },
      confirm() {
        this.handoverVisible = false
        this.$message({
          message: '交班成功',
          type: 'success'
        })

      }
    }
  };
</script>
<style scoped rel="stylesheet/scss" lang="scss">
  .tab {
    background-color: #fff;
    padding: 10px 20px;

    li {
      display: inline-block;
      width: 105px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #9C9186;
      font-size: 16px;
      cursor: pointer;

      &.on {
        background-color: #CAAB62;
        color: #fff;
        border-radius: 2px;
      }
    }
  }

  .title {
    font-size: 20px;
    color: #CAAB62;

  }

  .date {
    text-align: right;
    margin-bottom: 20px;
  }

  .jine {
    color: #CAAB62;

    font-size: 14px;

    p {
      color: #201D1B;
      margin-top: 5px;
    }

    span {
      font-size: 28px;
    }
  }

  .txtright.btn {
    text-align: right;
    margin-top: 20px;

  }

  .list {
    font-size: 14px;
    color: #292929;
    line-height: 30px;

    .colory {
      color: #9C9186;
    }
  }

  .txtcenter {
    margin-bottom: 20px;
    font-size: 14px;
  }

  .money {
    color: #CAAB62;
  }

  .bgf {
    background-color: #fff;
    padding: 20px 30px;
    margin-top: 20px;

    .tongji {
      align-items: center;

      .item {
        display: flex;
        align-items: center;

        li {
          color: #9C9186;
          font-size: 14px;
          margin-left: 15px;
          line-height: 25px;

          span {
            color: #CAAB62;
            font-size: 20px;
          }
        }
      }

    }

    .txtright {
      text-align: right;

      button {
        margin-left: 20px;
      }
    }

    .paginations {
      text-align: center;
      margin-top: 20px;
    }

    .tables {
      margin-top: 20px;

      .shouzhi {
        border: 1px solid #CAAB62;
        color: #CAAB62;

        &:visited,
        &:hover,
        &:active {
          background-color: #CAAB62;
          color: #fff;
        }
      }

      .chuku {
        border: 1px solid #1085FF;
        color: #1085FF;

        &:visited,
        &:hover,
        &:active {
          background-color: #1085FF;
          color: #fff;
        }
      }
    }

    .time {
      color: #9C9186;
      align-items: center;
      margin-top: 20px;

      span {
        color: #292929;

        &.mar50 {
          margin-right: 50px;
        }
      }

      button {
        width: 285px;
      }
    }
  }
</style>
